<template>
  <swiper :options="swiperOption" ref="mySwiper" class="my-swiper">
    <!-- slides -->
    <swiper-slide>
      <div class="btn-wrap">
        <div class="btn-list" v-for="(item,index) in firstList " :key="index">
          <img :src="item.url" alt />
          <p>{{item.title}}</p>
        </div>
      </div>
    </swiper-slide>
    <swiper-slide>
      <div class="btn-wrap">
        <div class="btn-list" v-for="(item,index) in secondList" :key="index">
          <img :src="item.url" alt />
          <p>{{item.title}}</p>
        </div>
      </div>
    </swiper-slide>
    <div class="swiper-pagination page-point" slot="pagination"></div>
  </swiper>
</template>
    <script>
import "swiper/dist/css/swiper.css";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import axios from "axios";
export default {
  name: "homebutton",
  data() {
    return {
      firstList: [],
      secondList: [],
      swiperOption: {
        autoplay: false,
        pagination: {
          el: ".swiper-pagination",
          
          bulletClass: "active"
        }
      }
    };
  },
  components: {
    swiper,
    swiperSlide
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper;
    }
  },
  created() {
    let that = this;
    axios.get("data/homeBtn.json").then(function(response) {
      that.firstList = response.data.first;
      that.secondList = response.data.second;
      
    });
  },
  mounted() {
    this.swiper.slideTo(3, 1000, false);
  }
};
</script>
<style>
.btn-wrap {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: center;
}
.btn-list {
  width: 20%;
  text-align: center;
}
.btn-list img {
  width: 44px;
  margin-top: 11px;
}
.btn-list p {
  color: #666;
  font-size: 10px;
  margin-top: 4.8px;
}

/* span {
  border: none;
} */
.page-point {
  position: relative;
  bottom: 0;
  /* background-color: red; */
  margin-top: 5px;
}
.active {
  box-sizing: border-box;
  border-radius: 7px;
  height: 6px;
  width: 6px;
  display: inline-block;
  opacity: 1;
  background: #e0e0e0;
  bottom: 27px;
  margin: 0 3px;
}
.swiper-pagination-bullet-active {
  background-color: #e93b3d;
  width: 10px;
  height: 5px;
  border-radius: 3px;
  opacity: 0.7;
}
.my-swiper {
  /* position: absolute; */
  background-color: #fff;
  border-radius: 16px 16px 0 0;
}
</style>
